<template>
  <div class="search">
    <div>
      <i class="icon icon-search"></i>
      <input type="text" placeholder="搜索大学、专业、职业" v-model="searchVal" @keyup.enter="search()" />
      <a class="btn-search" @click="search()">搜索</a>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchVal: ''
    }
  },
  methods: {
    search () {
      this.$emit('search', this.searchVal)
    }
  }
}
</script>
<style lang="scss" scoped>
.search {
  margin: 45px 0 20px;
  // margin-left: calc(100% - 78%);
  text-align: center;
  padding: 0 30px;
  line-height: 30px;
  position: relative;
  // display: flex;
  >div{
    display: flex;
    width: 70%;
    margin: 0 auto;
    justify-content: flex-start;
  }
  .icon {
    position: absolute;
    top: 2px;
    color: #b2b2b2;
    padding: 0 15px;
    font-size: 12px;
  }
  input[type="text"] {
    // flex: 1;
    padding-left: 30px;
    border-radius: 15px;
    border: 1px solid #b2b2b2;
    height: 30px;
    width: 86%!important;
    font-size: 16px;
    &::-webkit-input-placeholder {
      color: #b2b2b2;
    }
  }
  .btn-search {
    margin-left: 12px;
    color: $energized;
  }
}
</style>
